<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <van-icon name="arrow-left" @click="goBack" />
      <span>购物车</span>
    </div>
    <main>
      <ShopingCart></ShopingCart>

      <div class="empty" v-if="isShow">
        <van-empty description="购物车空空如也">
          <van-button round type="danger" class="bottom-button" @click="leap"
            >立即购物</van-button
          >
        </van-empty>
      </div>

      <p class="kankan">————————快点来看看————————</p>

      <div class="goods-box">
        <div
          v-for="item in goodslist"
          :key="item.proid"
          @click="goGoodsDetail(item.proid)"
          class="goods"
        >
          <img :src="item.img1" />
          <p class="title">{{ item.proname }}</p>
          <p class="price">¥{{ item.originprice }}</p>
        </div>
      </div>
    </main>
    
    <van-submit-bar
     :price="name"
      button-text="提交订单"
      @submit="onSubmit">
      <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script>
import axios from "axios";
import ShopingCart from "@/components/ShopingCart.vue";

export default {
  name: "ShoppingCar",
  components: {
    ShopingCart,
  },
  data() {
    return {
      checked: false,
      goodslist: [],
      pageIndex: 1,
      name: 0,
      isShow:true
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    onSubmit() {},
    goGoodsDetail(id) {
      this.$router.push("/GoodsDetail/" + id);
    },
    all() {
      // 点击修改全部
      axios.post(
        "/api/cart/selectall",
        `userid=${localStorage.getItem("userid")}&type=${this.checked}`
      );
      window.location.reload()
    },
    leap() {
      this.$router.push("/Category");
    },
  },
  created() {
    axios({
      url: "/api/pro/recommendlist",
      params: {
        count: this.pageIndex,
        limitNum: 12,
      },
    }).then((res) => {
      if (res.data.code == 200) {
        this.goodslist = res.data.data;
      }
    });
    
    
  },
  updated() {
    axios({
      method: "post",
      url: "/api/cart/list",
      data: `userid=${localStorage.getItem("userid")}`,
    }).then((req) => {
      if (req.data.code == 200) {
        // this.goodslist = req.data.data;
        this.isShow=false
        let sum = 0;
        req.data.data.forEach(item => {
          if (item.flag == true) {
              sum += item.num * item.originprice * 100;         
          }
          this.name = sum;
          // this.$router.go(0)
          // 存在bug,一直在更新
          // console.log(req.data);
        });
      }
    });
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
}
.header {
  height: 3.5rem;
  text-align: center;
  font-size: 1.3rem;
  line-height: 3.5rem;
  border-bottom: 2px solid gray;
}
.van-icon {
  float: left;
  padding-left: 10px;
  line-height: 3.5rem;
  color: rgb(24, 24, 64);
}
main {
  flex: 1;
  overflow: auto;
}
.goods-box {
  width: 100%;
  font-size: 14px;
  column-count: 2;
  column-gap: 5px;
}
.goods-box .goods {
  width: 100%;
  text-align: center;
  break-inside: avoid;
  background-color: white;
  margin-bottom: 0.25rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
  padding: 0.25rem;
}
.goods img {
  width: 90%;
}
.title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.price {
  text-align: left;
}

.kankan {
  color: rgb(19, 100, 187);
  text-align: center;
  margin-bottom: 1.25rem;
}
.footer {
  background-color: #fff;
}
</style>